<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Attendance Search Form</title>
<link rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css"/>
 	<style>
		div.ui-datepicker{
			font-size:12px;
		}
	</style>
 <script src="js/jquery-1.8.0.js"></script>
 <script src="js/jquery-ui-1.8.23.custom.js"></script>

</head>

<body>

<h2 align="center"> Attendance Search Form</h2>
<form id="form1" name="form1" method="post" action="searchattendance.htm">
  <table  align="center" cellpadding="5">
    <tr>
      <td width="83" align="right">Date:</td>
      <td width="144"><label>
        <input type="text" name="date" id="date" />
      </label></td>
    </tr>
    <tr>
      <td align="right">Hour:</td>
      <td><select name="hour" id="hour"  >
        <option value="1">I</option>
        <option value="2">II</option>
        <option value="3">III</option>
        <option value="4">IV</option>
        <option value="5">V</option>
        <option value="6">VI</option>
        <option value="7">VII</option>
      </select></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><label>
        <input name="Submit" type="submit" id="Submit" value="Search Attendance" />
      </label></td>
    </tr>
  </table>
</form>

<script type="text/javascript">
	$(function() {
		
		$("#date").datepicker({ dateFormat: "dd-mm-yy","showAnim":"slide" });
	});
	
</script>
<script src="js/college.js"></script>

</body>
</html>
